<!--
 * @Date: 2023-04-07 10:47:31
 * @LastEditTime: 2023-08-29 11:16:54
 * @FilePath: /wkw/src/tabbar/home/components/coinTrend.vue
 * 介绍:
-->
<script lang="ts" setup>
import vueEcharts, { ECOption } from "@@/components/rework/echarts";
import { graphic } from "echarts";
import { ApiHomeData } from "@@/api/module/tabbarPage";
import { fixedDecimals } from "@@/utils/tools/format";
import dayjs from "dayjs";
import useBalanceStore from "@@/store/useBalanceStore";
import { divide } from "mathjs";
import { useLiquidity } from "@@/hooks/business/useLiquidity";
import { sysLoad } from "@@/hooks/sysHooks";
import { useInterval } from "@@/hooks/toolsHooks";

const { t } = useI18n();
const props = defineProps<{
  homeData: ApiHomeData.Data | undefined;
}>();
const charts = computed(() => props.homeData?.kline);
const priceArr = computed(() =>
  charts.value?.map((v) => Number(fixedDecimals(v.close, 12)))
);
const isPlus = computed(() => Number(props.homeData?.wkc.change) >= 0);
const balanceStore = useBalanceStore();

const { total0, total1, setOption, getRatio, lpPool } = useLiquidity();

const _coin0 = computed(() => balanceStore.getCoinByCode("WKC"));
const _coin1 = computed(() => balanceStore.getCoinByCode("USDT"));

sysLoad(setLiquidity);
function setLiquidity() {
  setOption(_coin0.value!, _coin1.value!).then(() => {
    getRatio();
    interval.open();
  });
}
const interval = useInterval(getRatio, 20 * 1000, { setupOpen: false });
onActivated(getRatio);
function getCoinTotal() {
  const _addr0 = _coin0.value?.contract_addr?.toLowerCase();
  const addr0 = lpPool.coin0?.contract_addr?.toLowerCase();
  const coin0 = addr0 === _addr0 ? total0.value : total1.value;
  const _addr1 = _coin1.value?.contract_addr?.toLowerCase();
  const addr1 = lpPool.coin1?.contract_addr?.toLowerCase();
  const coin1 = _addr1 === addr1 ? total1.value : total0.value;
  return { coin0: Number(coin0), coin1: Number(coin1) };
}

const cachePriceKey = "home_wkc/usdt-price";

/**现在价格 */
const price = computed(() => {
  const { coin0, coin1 } = getCoinTotal();
  const res = divide(coin1, coin0);
  if (isNaN(res)) return Number(window.localStorage.getItem(cachePriceKey));
  return res;
});

watch(price, (newValue, oldValue) => {
  if (isNaN(newValue)) return;
  if (newValue === oldValue) return;
  window.localStorage.setItem(cachePriceKey, String(newValue));
});

function getDot(color = "#008cf0") {
  return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
}

const option = computed<ECOption | undefined>(() => {
  const res: ECOption = {
    dataZoom: {
      // 放大和缩放
      type: "inside",
    },
    grid: {
      top: "10%",
      bottom: "0%",
      left: "-10%",
      right: "-10%",
    },
    tooltip: {
      trigger: "axis",
      formatter(params: any) {
        const index = Number(params[0]?.dataIndex);
        const data = params[0];
        const item = charts.value![index];

        return `<div class="T-S-sm">
          <div >${data?.axisValueLabel}</div>
            <div>
              ${data.marker}${data.seriesName}:
              ${data.value}
            </div>
            <div>
             ${getDot()}${t("cheng-jiao-liang")}:
              ${Number(fixedDecimals(item?.volume, 12))}
            </div>
            </div>
            `;
      },
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: isPlus.value ? "#29a17e" : "#eb171a",
        },
      },
    },
    xAxis: {
      show: false,
      type: "category",
      data: props.homeData?.kline.map((v) =>
        dayjs(v.time * 1000).format("YYYY/MM/DD HH:mm")
      ),
    },
    yAxis: {
      show: false,
      type: "value",
      max(v) {
        return v.max;
      },
      min(v) {
        return v.min;
      },
    },
    series: [
      {
        name: t("jia-ge-0"),
        data: priceArr.value,
        type: "line",
        symbol: 'circle',
        showSymbol: false,
        lineStyle: {
          color: isPlus.value ? "#29a17e" : "#eb171a",
        },
        itemStyle: {
          color: isPlus.value ? "#29a17e" : "#eb171a",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isPlus.value ? "#29a17e" : "#eb171a",
            },
            {
              offset: 1,
              color: isPlus.value ? "#00ff0000" : "#ff000000",
            },
          ]),
        },
      },
      // {
      //   tooltip: {
      //     show: false,
      //   },
      //   name: t("zuo-ri-shou-pan-jia"),
      //   data: priceArr.value?.map(() => price.value),

      //   type: "line",
      //   showSymbol: false,
      //   lineStyle: {
      //     color: "#999",
      //     type: "dashed",
      //   },
      //   itemStyle: {
      //     color: "#999",
      //   },
      // },
    ],
  };
  if (!props.homeData) return;
  return res;
});
</script>

<template>
  <div class="full MT-xl">
    <h3>{{ fixedDecimals(price, 6) }}</h3>
    <div class="flex-A-B flex-J-SB">
      <div class="flex-A-B C-T4">
        <h3>{{ "WKC" }}</h3>
        <span class="T-S-sm">/USDT</span>
      </div>
      <CplusMinus
        class="ML-sm T-S-sm"
        :value="Number(props.homeData?.wkc.change)"
        right-text="%"
        style="border-bottom: 1rem solid var(--current-color)"
        radius="0"
      ></CplusMinus>
    </div>
    <div style="width: 100%">
      <vueEcharts autoresize style="height: 400rem" :option="option" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
